let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let {CleanWebpackPlugin} = require('clean-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
let OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')

module.exports = {
    entry:['./src/js/index.js','./src/index.html'],
    output:{
        path:path.resolve(__dirname,'../dist'),
        filename:'./js/bundle.js',
        publicPath:'/' //所有输出资源在引入时的公共路径
    },
    module:{
        rules:[
            //less
            {
                test:/\.less$/,
                loader:[
                    // 'style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader:'postcss-loader',
                        options:{
                            ident:'postcss',
                            plugins:() => [
                                require('postcss-flexbugs-fixes'),
                                require('postcss-preset-env')({
                                    autoprefixer:{
                                        flexbox:'no-2009'
                                    },
                                    stage:3
                                }),
                                require('postcss-normalize')()
                            ],
                            sourceMap:true
                        }
                    },
                    'less-loader'
                ]
            },
            //eslint
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'eslint-loader',
                enforce:'pre',
                options: {
                    fix:true
                },
            },
            //babel
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                                '@babel/preset-env',
                                {
                                    useBuiltIns:'usage',
                                    corejs:{version:3}, //解决找不到core-js的问题
                                    targets:{
                                        "chrome":"58",
                                        "ie":"9"
                                    }
                                }
                            ]
                        ],
                        cacheDirectory:true  //开启缓存
                    }
                }
            },
            //url-loader
            {
                test:/\.(png|jpg|gif)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            limit:8192,
                            publicPath:'images/',//决定url路径
                            outputPath:'images', //输出的文件夹
                            name:'[hash:8].[ext]'
                        }
                    }
                ]
            },
            //html-loader
            {
                test:/\.html$/,
                use:{
                    loader:'html-loader'
                }
            },
            //file-loader
            /*
            {
                test:/.\(eot|svg|woff|woff2|ttf|mp3|mp4|avi)$/,
                loader:'file-loader',
                options:{
                    outputPath:'media',
                    name:'[hash:8].[ext]'
                }
            }
            */
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            minify:{
                collapseWhitespace: true,
                removeComments: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true
            }
        }),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename:"css/[hash:5].css",
        }),
        new OptimizeCssAssetsPlugin({
            cssProcessorPluginOptions:{
                preset:['default',{discardComments:{removeAll:true}}]
            },
            cssProcessorOptions:{  //生成source map 文件    
                map:{
                    inline:false,
                    annotation:true
                }
            }
        })
    ],
    mode:"production",
    devtool:'cheap-module-eval-source-map'
}